import React, { useState } from 'react'
import { Modal, Toast } from 'antd-mobile'
import { helpApply } from '../../request/home'

function HelpPlaceOrder(props) {
  const { visible, close, orderNo } = props
  const [isLoading, setIsLoading] = useState(false)
  const onSubmit = async() => {
    if (isLoading) return
    setIsLoading(true)
    const { code, message: errMsg } = await helpApply({ order_no: orderNo })
    setIsLoading(false)
    if (code) {
      console.log(errMsg)
      return Toast.fail(errMsg)
    }
    Toast.success('自动下单已提交')
    close()
  }

  return (
    <div className="help-place-order">
      <Modal
        visible={visible}
        onClose={close}
        transparent
        title=""
        className="help-place-order--modal"
      >
        <p>
          <img src={require('../../assets/images/sorry.svg')} alt=""/>
        </p>
        <p className="content">
          非常抱歉！由于您所在地移动服务器升级，暂时无法下单，如有需要，可选择系统帮您自动下单，若符合下单条件，成功后会有短信提醒您。
        </p>
        <div className="footer">
          <span onClick={close}>取消</span>
          <span onClick={onSubmit}>{isLoading ? '提交中...' : '帮我下单'}</span>
        </div>
      </Modal>
    </div>
  )
}

export default HelpPlaceOrder
